<template>
    <div class="bar-left-container" style="height: 100%;overflow-y: scroll;">
        <div class="progress-item" v-for="(item, index) in porps.progressData" :key="index">
            <div class="progress-label">
                <span class="label-text">{{ item?.name }}</span>
                <!-- <span class="label-value">{{ item?.value }}%</span> -->
            </div>
            <div style="flex: 1;height: 100%;display: flex;" v-if="item?.type === 1">
                <div style="position: relative;width: 100%;height: 100%;max-height: 25px;">
                    <div style="position: absolute;top: 0;left: 0;width: calc(100%);height: 100%;z-index: 9;min-height: 25px;" >
                        <el-progress :percentage="(item?.value / item?.valueB) * 100" :color="item?.color" :stroke-width="8" stroke-linecap="round" :show-text="true" :text-inside="true" style="width: 100%;height: 100%;">
                            <span>{{item?.value}} / {{item?.valueB}}</span>
                        </el-progress>
                    </div>
                    <div style="height: 100%;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;">
                        <el-progress :percentage="100" color="rgba(47, 83, 138, 0.6)" :stroke-width="8" stroke-linecap="square" :show-text="false" :text-inside="false" style="width: calc(100%);height: 100%;"/>
                        <!-- <span style="position: absolute;top: 0;right: 0;z-index: 99;">{{ item?.valueB }}</span> -->
                    </div>
                </div>
                <!-- <span>123456</span> -->
            </div>
            <div v-else style="flex: 1;height: 100%;">
                <el-progress :percentage="item?.value" :color="item?.color" :stroke-width="8" stroke-linecap="square"
                    :show-text="true" style="height: 100%;width: 100%;" :text-inside="true" class="normal"/>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
const porps = defineProps({
    progressData: {
        type: Array<any>,
        default: () => []
    }
})
// 进度条数据

</script>

<style lang="less" scoped>
.bar-left-container {
    width: 100%;
    height: 100%;
    padding: 20px 20px 50px 20px;
    background: rgba(0, 20, 40, 0.8);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    gap: 20px 0;
    //   border: 1px solid rgba(31, 99, 163, 0.3);
}

.progress-item {
    margin-bottom: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    // display: flex;
    // align-items: center;
    // height: 25px;
    // display: flex;
    &:last-child {
        margin-bottom: 0;
    }
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //   margin-bottom: 8px;
    width: 6em;
    .label-text {
        color: #7EB7FD;
        font-size: 14px;
        font-weight: 500;
    }

    .label-value {
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
    }
}

:deep(.el-progress-bar) {
    height: 100%;
}

:deep(.el-progress-bar__outer) {
    // background-color: rgba(31, 99, 163, 0.2);
    background-color: rgba(47, 83, 138, 0);
    // border-radius: 0;
    height: 100% !important;
}

:deep(.el-progress-bar__inner) {
    border-radius: 0;
    transition: width 0.6s ease;
}

:deep(.normal){
    width: 100%;
    .el-progress-bar__outer {
        // background-color: rgba(31, 99, 163, 0.2);
        background-color: rgba(47, 83, 138, 0) !important;
        border-radius: 0;
        height: 100% !important;
    }
}
</style>